<template>
  <el-dialog :visible.sync="isDialog"
    title='新增文章'
    width="800px"
    @close="close">
    <el-form 
      ref="item"
      :rules="rules"
      label-position="right"
      label-width="80px">
      <el-form-item label="文章标题"
        prop="title">
        <el-input v-model="title"></el-input>
      </el-form-item>
      <el-form-item label="文章简介"
        prop="summary">
        <el-input v-model="summary"></el-input>
      </el-form-item>
      <el-form-item label="封面图"
        prop="img">
        <el-upload class="avatar-uploader"
          action="http://yahansi.demo2.dx623.com/manage/article/add"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="内容">
        <div>
          <quillEditor class="u_editor"
            v-model="content"
            ref="editor"></quillEditor>
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="isDialog = false">取 消</el-button>
      <el-button type="primary"
        @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  },
  
  data() {
    // { required: true, message: '请选择活动区域', trigger: 'change' }
    return {
      isDialog: false,
      title:'',
      thumb:'',
      summary:'',
      content:'',
      rules: {
        title: [{ required: true, message: '请输入名称',trigger: 'blur'}],
        summary: [{ required: true, message: '请输入简介',trigger: 'blur'  }]
      },
    }
  },

  methods: {
    close() {
      this.$emit('close')
    },
    submit() {
      this.$http.post("/manage/article/add",{
        cate:1,
        title:this.title,
        summary:this.summary,
        thumb:this.thumb,
        content:this.content
      })
      .then(res=>{
        if(res.code==1){
          alert(res.msg)
        }
      })
    },
    handleAvatarSuccess(res, file) {
      this.thumb = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  line-height: 200px;
}
</style>
